<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>京东秒杀</title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="jquery-3.2.1.js"></script>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script>
			$(function() {
				window.onscroll = function() {
					if(document.documentElement.scrollTop > 88) {
						$(".tab .timenav").css({
							"position": "fixed",
							"top": "0px",
							"z-index": "99"
						});
					} else {
						$(".tab .timenav").css("position", "");
					}
				}
			})
			
			
	
		setInterval(function() {
			var end = new Date(2018, 1, 24, 00, 00);
			var now = new Date();
			var t = end.getTime() - now.getTime();
			var hour = Math.floor(t / (1000 * 60 * 60) % 24);
			hour = hour < 10 ? "0" + hour : hour;
			var minutes = Math.floor(t / (1000 * 60) % 60);
			minutes = minutes < 10 ? "0" + minutes : minutes;
			var seconds = Math.floor(t / 1000 % 60);
			seconds = seconds < 10 ? "0" + seconds : seconds;
			$(function() {
				$(".seckill-time:eq(0)").html(hour);
				$(".seckill-time:eq(1)").html(minutes);
				$(".seckill-time:eq(2)").html(seconds);
			})
		}, 1000)

		var datas;
		var dataId;
		var words = ["", "精选", "食品", "母婴", "酒饮", "清洁"];
		var jdurl = "https://img13.360buyimg.com/n7/";
		$(start);
		
		function start() {
			$(".tab .timenav p:eq(0)").css({
				"color": "#f23030",
				"margin-top": "0px"
			});
			$(".tab .timenav p:eq(0)>span").css("font-size", "36px");
			$(".tab .timenav p").click(
				function() {
					var index = $(this).index();
					$(".tab .timenav>:nth-of-type(" + (index + 1) + ")").css({
						"color": "#f23030",
						"margin-top": "0px"
					});
					$(".tab .timenav>:nth-of-type(" + (index + 1) + ")>span").css("font-size", "36px");
					$(this).siblings().removeAttr("style");
					$(this).siblings().find("span").removeAttr("style");
				}
			);
		};

		function jindongdata(data) {
			for(var key in data) {
				datas = data[key];
				console.log(datas);
			}
//			$(".tab>:last-child>div:eq(0)").html("");
//			$(".title").html("");
//			$("img").attr("src","");
			for(var i = 0; i < datas.length; i++) {
				var pro = datas[i];
				var $newpro = $(".product").clone(true);
				$newpro.find("img").attr("src", jdurl + pro.image_url);
				$newpro.find(".title").html(pro.ad_title);
//				$(".title").html(pro.ad_title);
//				$("img").attr("src", jdurl + pro.image_url);
//				$(".tab>:last-child>div:eq(0)").append($newpro);
//				$(".time1").append($newpro);

			}
			console.log(dataId)
		}
		</script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.clearfix {
				display: table;
				content: "";
				clear: both;
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.top {
				height: 88px;
				width: 100%;
				background: linear-gradient(to bottom, white, #efefef);
				border-bottom: 2px solid #ccc;
				text-align: center;
				line-height: 88px;
				font-size: 34px;
				margin-bottom: 10px;
			}
			
			.top .back {
				display: block;
				width: 20px;
				height: 40px;
				background: url(jd-sprites.png) no-repeat -100px 0px;
				margin-top: 24px;
				margin-left: 20px;
			}
			
			.top .home {
				display: block;
				width: 40px;
				height: 40px;
				background: url(jd-sprites.png) no-repeat -120px 0px;
				;
				margin-top: 24px;
				margin-right: 20px;
			}
			
			.tab {
				width: 100%;
			}
			
			.tab .timenav {
				width: 100%;
				background: white;
			}
			
			.tab .timenav p {
				margin-top: 10px;
				display: inline-block;
				width: 20%;
				height: 102px;
				float: left;
				font-size: 28px;
				text-align: center;
				color: #222;
			}
			
			.tab .timenav p span {
				font-weight: 600;
			}
			/*.tab .timenav .selected{
				color:#f23030;
				margin-top: 0px;
			}
			.tab .timenav .selected span{
				font-size: 36px;
			}*/
			
			.tab .time {
				font-size: 28px;
				width: 100%;
				padding-bottom: 10px;
				border-bottom: 1px solid #ccc
			}
			
			.tab .time .miaosha {
				color: #f23030;
				margin-left: 20px;
			}
			
			.tab .time .end {
				margin-right: 20px;
				font-size: 26px;
			}
			
			.tab .time .end .seckill-time {
				display: inline-block;
				background-color: black;
				color: white;
				width: 34px;
				text-align: center;
				border-radius: 10px;
			}
			
			.product {
				width: 100%;
				padding: 0 20px;
				box-sizing: border-box;
			}
			
			.product .pic {
				width: 30%;
				position: relative;
			}
			
			.product a {
				margin-top: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid #ccc;
			}
			
			.product .pic img {
				width: 100%;
			}
			/*.tab .product .pic .mask{
				width:100% ;
				background-color: rgba(0,0,0,.8);
				color:white;
				position: absolute;
				text-align: center;
				bottom: 0px;
				left:0px;
				height: 40px;
				line-height: 40px;
			}*/
			
			.product .txt {
				padding-left: 10px;
				width: 70%;
				font-size: 28px;
				box-sizing: border-box;
			}
			
			.product ul a li {
				color: #222222;
			}
			
			.product .txt .title {
				width: 100%;
				height: 80px;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				color: #222;
				-webkit-box-orient: vertical;
				margin-bottom: 46px;
			}
			
			.product .txt .price {
				color: #f23030;
				font-size: 44px;
			}
			
			.product .price span {
				font-size: 24px;
			}
			
			.product .num .disprice {
				font-size: 24px;
				color: #666;
			}
			
			.product .cnt {
				width: 100%;
			}
			
			.product .getmiao {
				text-align: right;
				width: 60%;
			}
			
			.product .go {
				width: 100%;
				height: 50px;
			}
			
			.product .miaoshabtn {
				font-size: 30px;
				height: 50px;
				border-radius: 6px;
				line-height: 50px;
				text-align: center;
				color: white;
				width: 52%;
				background: #f23030;
			}
			
			.product .count {
				margin-top: 6px;
				color: #666;
				font-size: 24px;
			}
			
			.product .count>span:nth-child(1) {
				display: inline-block;
				height: 14px;
				width: 52%;
				border-radius: 6px;
				border: 1px solid #f36262;
				margin-left: 10px;
				position: relative;
			}
			
			.product .count span span {
				display: inline-block;
				height: 14px;
				width: 52%;
				border-top-left-radius: 6px;
				border-bottom-left-radius: 6px;
				background: #f36262;
				position: absolute;
				top: 0px;
				left: 0px;
			}
		</style>
	</head>

	<body>
		<div class="top clearfix">
			<div class="back fl"></div>
			<span>京东秒杀</span>
			<div class="home fr"></div>
		</div>
		<div class="tab clearfix">
			<div class="timenav fr">
				<p class="selected"><span>18:00</span><br/>秒杀中</p>
				<p><span>20:00</span><br/>即将开场</p>
				<p><span>22:00</span><br/>即将开场</p>
				<p><span>00:00</span><br/>即将开场</p>
				<p><span>06:00</span><br/>即将开场</p>
			</div>
			<div class="time clearfix">
				<div class="miaosha fl">秒杀中 先下单先得哦</div>
				<div class="end fr">
					<span>距结束</span>
					<span class="seckill-time"></span>
					<span>:</span>
					<span class="seckill-time"></span>
					<span>:</span>
					<span class="seckill-time"></span>
				</div>
			</div>
			<div class="detail">
				<div class="time1">18:00</div>
				<div class="time1">20:00</div>
				<div class="time1">22:00</div>
				<div class="time1">00:00</div>
				<div class="time1">06:00</div>
			</div>
			
			
		</div>
		
		<!--模板-->
		<div class="product">
				<a href="#" class="clearfix">
					<div class="pic fl">
						<img src="https://m.360buyimg.com/mobilecms/s220x220_jfs/t16003/291/1579503882/158934/77d24c66/5a557a82Na3732d11.png!q70.jpg" />
						<!--<div class="mask">秒杀完</div>-->
					</div>
					<div class="txt fr">
						<div class="title">南极人（NANJIREN） 颈椎按摩器 肩颈按摩披肩 按摩枕垫颈部腰部肩部 按摩仪 敲打披肩金色</div>
						<div class="cnt clearfix">
							<div class="num fl">
								<div class="price"><span>&yen</span>79</div>
								<del class="disprice">&yen99</del>
							</div>
							<div class="getmiao fr">
								<div class="go">
									<div class="miaoshabtn fr">去秒杀</div>
								</div>
								<div class="count">已秒20%
									<span>
									<span class="progress">
									</span>
									</span>
								</div>
							</div>
						</div>
					</div>
				</a>
			</div>
	</body>
	<script>
		$(start);
		function start(){
			$(".tab>:last-child>*").hide();
			$(".tab>:last-child>:first-of-type").show();
			
		}
	</script>
	<script src="https://x.jd.com/Search?callback=jindongdata&area=1&enc=utf-8&keyword=%E8%BF%9E%E8%A1%A3%E8%A3%99&adType=7&page=2&ad_ids=291%3A36&xtest=new_search&_=1516263730462">
	</script>

</html>